import { useState, useEffect } from 'react'
import { Badge, Button, ListGroup, Toast } from "react-bootstrap";

interface T_Product {
    name: string,
    id: number,
    num: number
}
function Cart() {
    const [num, setNum] = useState(0)
    const [productList, setProductList] = useState<T_Product[]>([])
    const [showToast, setShowToast] = useState(false);
    const [toastMsg, setToastMsg] = useState('')
    const [toastBg, setToastBg] = useState('warning')

    useEffect(() => {
        setProductList([
            { name: 'Apple Inc. (苹果公司)', id: 1, num: 1 },
            { name: 'Microsoft Corporation (微软公司)', id: 2, num: 1 },
            { name: 'Amazon.com Inc. (亚马逊公司)', id: 3, num: 1 },
            { name: 'Alphabet Inc. (谷歌母公司)', id: 4, num: 1 },
            { name: 'Facebook Inc. (Facebook公司)', id: 5, num: 1 },
            { name: 'NVIDIA Corporation (英伟达公司)', id: 6, num: 1 },
            { name: 'PayPal Holdings Inc. (贝宝控股公司)', id: 7, num: 1 },
            { name: 'Intel Corporation (英特尔公司)', id: 8, num: 1 },
            { name: 'Tesla Inc. (特斯拉公司)', id: 9, num: 1 },
            { name: 'Adobe Inc. (Adobe公司)', id: 10, num: 1 },
        ])
    }, [])



    const minus = (product: T_Product) => {
        if (product.num <= 0) {
            setShowToast(true)
            setToastBg('danger')
            setToastMsg("The minimum value cannot be 0")
            return
        }
        setProductList(prevData =>
            prevData.map(item =>
                item.id === product.id ? { ...item, num: product.num - 1 } : item
            )
        );
    }

    const add = (product: T_Product) => {
        if (product.num >= 10) {
            setShowToast(true)
            setToastBg('danger')
            setToastMsg("The maximum value cannot be 10")
            return
        } else {
            setToastBg('success')
        }
        setProductList(prevData =>
            prevData.map(item =>
                item.id === product.id ? { ...item, num: product.num + 1 } : item
            )
        );
    }



    useEffect(() => {
        const sum = productList.reduce((accumulator, currentValue) => {
            return accumulator + Number(currentValue.num || 0);
        }, 0);

        setNum(sum)
    }, [productList])



    return (<div className="App">
        <header className="App-header">
            Cart <br /><br />
            <Toast onClose={() => setShowToast(false)} bg={toastBg} show={showToast} delay={3000} autohide>
                <Toast.Header closeButton={false}>
                    <strong className="me-auto">Notification</strong>
                </Toast.Header>
                <Toast.Body>{toastMsg}</Toast.Body>
            </Toast>

            <Button size="lg">total: <Badge bg="secondary">{num}</Badge></Button>

            <ListGroup>
                {productList.map(product => <ListGroup.Item key={product.id} className='center-between'>
                    {product.name}
                    <div>
                        <Button variant="outline-primary" onClick={() => minus(product)}>-</Button>
                        <Badge bg="secondary">{product.num}</Badge>
                        <Button variant="outline-primary" onClick={() => add(product)}>+</Button>
                    </div>
                </ListGroup.Item>)}
            </ListGroup>

        </header>


    </div>)
}

export default Cart;